<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>FFBox - v1.1</title>
		<link href="skin/default (light)/index.css" rel="stylesheet" type="text/css" />
		<link href="skin/default (light)/taskitem.css" rel="stylesheet" type="text/css" />
		<script>window.$ = window.jQuery = require('./js/jquery.min@2.1.4.js')</script>	<!-- electron 与 jQuery 发生冲突，需使用这种方法导入 -->
		<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
		<!--
		<script src="js/jquery.min@2.1.4.js"></script>
		<script>
			if (typeof module === 'object') {window.jQuery = window.$ = module.exports;};
		</script>
		-->
	</head>
	<body id="body">
		<div id="content-wrapper">
			
			<!-- 标题栏 -->
			<div id="titlebar" class="idle">
				<div id="titlebar-background" class="titlebar-background-green"></div>
				<div id="titlebar-title">
					<div id="titlebar-icons">
						<div id="icon-long"></div>
						<div id="icon-square"></div>
					</div>
					<span id="titletext">丹参盒 v1.1</span>
				</div>
				<div id="titlebar-control">
					<div class="tri-button" id="minimum">
						<div class="tooltip-leftbottom">最小化</div>
					</div>
					<div class="tri-button" id="windowmode" href="">
						<div class="tooltip-leftbottom">最大化/还原</div>
					</div>
					<div class="tri-button" id="close">
						<div class="tooltip-leftbottom">关闭</div>
					</div>
				</div>
			</div>
			
			<!-- 中间 -->
			<div id="centerview">
				
				<!-- 侧边栏 -->
				<div id="sidebar-wrapper">
					<div id="sidebar">
						<div id="sidebar-background"></div>
						<div id="sidebar-top">
							<div class="sidebar-selection sidebar-selection-selected" onclick="listselect(0)" id="listselection_0">
								<div class="sidebar-icon" style="background-position-y: 0px;"></div>
							</div>
							<div class="sidebar-selection" onclick="listselect(1)" id="listselection_1">
								<div class="sidebar-icon" style="background-position-y: -28px;"></div>
							</div>						
						</div>
						<div id="sidebar-bottom">
							<div class="sidebar-selection sidebar-selection-selected" onclick="paraselect(0)" id="paraselection_0">
								<div class="sidebar-icon" style="background-position-y: -56px;"></div>
							</div>
							<div class="sidebar-selection" onclick="paraselect(1)" id="paraselection_1">
								<div class="sidebar-icon" style="background-position-y: -84px;"></div>
							</div>
							<div class="sidebar-selection" onclick="paraselect(2)" id="paraselection_2">
								<div class="sidebar-icon" style="background-position-y: -112px;"></div>
							</div>
							<div class="sidebar-selection" onclick="paraselect(3)" id="paraselection_3">
								<div class="sidebar-icon" style="background-position-y: -140px;"></div>
							</div>
							<div class="sidebar-selection" onclick="paraselect(4)" id="paraselection_4">
								<div class="sidebar-icon" style="background-position-y: -168px;"></div>
							</div>
							<div class="sidebar-selection" onclick="paraselect(5)" id="paraselection_5">
								<div class="sidebar-icon" style="background-position-y: -196px;"></div>
							</div>
							<div class="sidebar-selection" onclick="paraselect(6)" id="paraselection_6">
								<div class="sidebar-icon" style="background-position-y: -224px;"></div>
							</div>						
						</div>
					</div>
				</div>
				
				<!-- 主内容 -->
				<div id="maincontent">
					
					<!-- 两个列表 -->
					<div id="listview">
						
						<!-- 任务列表-->
						<div class="listwindow listwindow-selected" id="listwindow_0">
							<!--
							<div id="searchbox">
								<img src="image/search.svg" />
								<input type="text" onfocus="document.getElementById('searchbox').style.opacity = 1;" onblur="document.getElementById('searchbox').style.opacity = 0.6;" />
							</div>
							-->
							<div id="startbutton" class="startbutton startbutton-green" onclick="startNpause();">▶开始</div>
							<div id="tasklist" onclick="itemUnselect();">
								<div id="tasklist-scroll">
									<!--
									<div id="taskitem_0000" class="taskitem-large-run" style="display: none;">
										<div class="taskitem-background-wrapper">
											<div class="taskitem-background">
												<div class="taskitem-background-white"></div>
												<div class="taskitem-background-progress"></div>
												<div class="taskitem-previewbox">
													<img />
												</div>
												<span class="taskitem-timing">00:00</span>
												<span class="taskitem-filename">文件名文件名文件名文件名文件名.filename</span>
												<div class="taskitem-info taskitem-infobefore">
													<div class="taskitem-img-format"></div>
													<span class="taskitem-span-format">mkv</span>
													<div class="taskitem-img-vcodec"></div>
													<span class="taskitem-span-vcodec">HEVC</span>
													<div class="taskitem-img-acodec"></div>
													<span class="taskitem-span-acodec">libvorbis</span>
													<div class="taskitem-img-size"></div>
													<span class="taskitem-span-size taskitem-size-compact">1920<br />1080</span>
													<div class="taskitem-img-vratecontrol"></div>
													<span class="taskitem-span-vratecontrol">24</span>
													<div class="taskitem-img-aratecontrol"></div>
													<span class="taskitem-span-aratecontrol">-</span>
												</div>
												<div class="taskitem-rightarrow"></div>
												<div class="taskitem-info taskitem-infoafter">
													<div class="taskitem-img-format"></div>
													<span class="taskitem-span-format">mkv</span>
													<div class="taskitem-img-vcodec"></div>
													<span class="taskitem-span-vcodec">HEVC</span>
													<div class="taskitem-img-acodec"></div>
													<span class="taskitem-span-acodec">libvorbis</span>
													<div class="taskitem-img-size"></div>
													<span class="taskitem-span-size taskitem-size-compact">1920<br />1080</span>
													<div class="taskitem-img-vratecontrol"></div>
													<span class="taskitem-span-vratecontrol">24</span>
													<div class="taskitem-img-aratecontrol"></div>
													<span class="taskitem-span-aratecontrol">-</span>
												</div>
												<div class="taskitem-graphs">
													<div class="taskitem-graph">
														<div class="taskitem-graph-ring"></div>
														<span class="taskitem-graph-data">1.00 M</span>
														<span class="taskitem-graph-description">码率</span>
													</div>
													<div class="taskitem-graph">
														<div class="taskitem-graph-ring"></div>
														<span class="taskitem-graph-data">1.00×</span>
														<span class="taskitem-graph-description">速度</span>
													</div>
													<div class="taskitem-graph">
														<div class="taskitem-graph-ring"></div>
														<span class="taskitem-graph-data">01:00</span>
														<span class="taskitem-graph-description">时间</span>
													</div>
													<div class="taskitem-graph">
														<div class="taskitem-graph-ring"></div>
														<span class="taskitem-graph-data">777777</span>
														<span class="taskitem-graph-description">帧</span>
													</div>
												</div>
												<div class="taskitem-delete" onclick="pauseNremove(' + taskCount +');"></div>
											</div>
										</div>
									</div>
									-->
									<div id="dropfilesdiv">
										<div id="dropfilesimage" onclick="debugLauncher();" draggable="false"></div>
									</div>
								</div>

							</div>
						</div>

						<!-- 指令窗口 -->
						<div class="listwindow listwindow-unselected" id="listwindow_1">
							<div id="commandwin" class="commandwin-small">
								<div id="outputCommand">
									<div class="commandwin-title">FFmpeg 输出</div>
									<div class="commandwin-box">
										<textarea id="commandwin-output" readonly></textarea>
									</div>
								</div>
								<div id="currentCommand">
									<div class="commandwin-title" id="commandwin-current-title">当前文件指令（未选择文件）</div>
									<div class="commandwin-box">
										<textarea id="commandwin-current" readonly></textarea>
									</div>
								</div>
								<div id="globalCommand">
									<div class="commandwin-title">全局指令</div>
									<div class="commandwin-box">
										<textarea id="commandwin-global" readonly></textarea>
									</div>
								</div>			
							</div>
						</div>
					</div>
					
					<!-- 参数 -->
					<div id="parabox">
						
						<!-- 拖动器 -->
						<div id="parabox-dragger">
							<div id="parabox-dragger-left"></div>
							<div id="parabox-dragger-right"></div>
							<div id="parabox-name"></div>
						</div>
						
						<!-- 快捷 -->
						<div class="parabox-content parabox-content-selected" id="parabox_0">
							<div id="para_preview">
								<div id="para_preview-text">
									<p>参数预览生成中</p>
								</div>
								<!--
								<div id="para_preview-save" class="presetbutton">
									<img src="image/star.png" />
									保存当前配置
								</div>
								-->
							</div>
							<p>预设存取功能暂未开发</p>
							<!--
							<div class="presetbutton">
								<img src="image/star.png" />
								轻度压缩视频
							</div>
							<div class="presetbutton">
								<img src="image/star.png" />
								中度压缩视频
							</div>
							<div class="presetbutton">
								<img src="image/star.png" />
								轻度压缩视频（极速）
							</div>
							<div class="presetbutton">
								<img src="image/star.png" />
								中度压缩视频（极速）
							</div>
							<div class="presetbutton">
								<img src="image/star.png" />
								B 站 1080P
							</div>
							<div class="presetbutton">
								<img src="image/star.png" />
								B 站 1080P+
							</div>
							<div class="presetbutton">
								<img src="image/star.png" />
								换容器为 MP4
							</div>
							-->
						</div>
						
						<!-- 格式 -->
						<div class="parabox-content parabox-content-unselected" id="parabox_1">
							<div class="combobox">
								<div class="combobox-title">容器/格式</div>
								<div class="combobox-selector" id="format_format-div" onclick="popupMenu('format_format')">
									<span class="combobox-selector-text" id="format_format-text">{{ data.format_format }}</span>
									<div class="combobox-selector-img"></div>
								</div>
							</div>
							<div class="checkbox">
								<div class="checkbox-title">元数据前移</div>
								<div class="checkbox-track" id="format_moveflags-div" onmousedown="switchDragStart(event, this);">
									<div class="checkbox-track-background" id="format_moveflags-bg" v-bind:style="data.format_moveflags == 0 ? 'width: 0%;' : 'width: 100%'"></div>
									<div class="checkbox-slipper" id="format_moveflags-slipper" v-bind:style="data.format_moveflags == 0 ? 'left: 0px;' : 'left: 64px'"></div>
								</div>
							</div>
							<div class="combobox">
								<div class="combobox-title">硬件解码</div>
								<div class="combobox-selector" id="format_hwaccel-div" onclick="popupMenu('format_hwaccel')">
									<span class="combobox-selector-text" id="format_hwaccel-text">{{ data.format_hwaccel }}</span>
									<div class="combobox-selector-img"></div>
								</div>
							</div>
						</div>
					
						<!-- 视频 -->
						<div class="parabox-content parabox-content-unselected" id="parabox_2">
							<div class="combobox">
								<div class="combobox-title">视频编码</div>
								<div class="combobox-selector" id="video_vcodec-div" onclick="popupMenu('video_vcodec')">
									<span class="combobox-selector-text" id="video_vcodec-text">{{ data.video_vcodec }}</span>
									<div class="combobox-selector-img"></div>
								</div>
							</div>
							<div class="combobox">
								<div class="combobox-title">硬件编码</div>
								<div class="combobox-selector" id="video_hwencode-div" onclick="popupMenu('video_hwencode')">
									<span class="combobox-selector-text" id="video_hwencode-text">{{ data.video_hwencode }}</span>
									<div class="combobox-selector-img"></div>
								</div>
							</div>
							<div class="combobox">
								<div class="combobox-title">分辨率</div>
								<div class="combobox-selector" id="video_resolution-div" onclick="popupMenu('video_resolution')">
									<span class="combobox-selector-text" id="video_resolution-text">{{ data.video_resolution }}</span>
									<div class="combobox-selector-img"></div>
								</div>
							</div>
							<div class="combobox">
								<div class="combobox-title">输出帧速</div>
								<div class="combobox-selector" id="video_fps-div" onclick="popupMenu('video_fps')">
									<span class="combobox-selector-text" id="video_fps-text">{{ data.video_fps }}</span>
									<div class="combobox-selector-img"></div>
								</div>
							</div>
							<!--
							<div class="combobox">
								<div class="combobox-title">码率模式</div>
								<div class="combobox-selector" id="video_ratecontrol-div" onclick="popupMenu('video_ratecontrol')">
									<span class="combobox-selector-text" id="video_ratecontrol-text">{{ data.video_ratecontrol }}</span>
									<div class="combobox-selector-img"></div>
								</div>
							</div>
							<div class="slider">
								<div class="slider-title">CRF</div>
								<div class="slider-module" id="video_crf-module" onmousedown="sliderDragStart(event, this);">
									<div class="slider-module-track"></div>
									<div class="slider-module-track-background" id="video_crf-bg" v-bind:style="'width: ' + video_crf_percent"></div>
									<span class="slider-module-mark" style="left: 100%;">0（无损）</span>
									<span class="slider-module-mark" style="left: 76.5%;">12（肉眼无损）</span>
									<span class="slider-module-mark" style="left: 64.7%;">18（高画质）</span>
									<span class="slider-module-mark" style="left: 52.9%;">24（中画质）</span>
									<span class="slider-module-mark" style="left: 41.1%;">30（低画质）</span>
									<span class="slider-module-mark" style="left: 0%;">51（最低画质）</span>
									<div class="slider-module-slipper" id="video_crf-slipper" onmousedown="sliderDragStart(event, this);"  v-bind:style="'left: ' + video_crf_percent"></div>
								</div>
								<div class="slider-text" id="video_crf-text">{{ data.video_crf }}</div>
							</div>
							
							<div class="slider invisible">
								<div class="slider-title">码率</div>
								<div class="slider-module" id="video_bitrate-module" onmousedown="sliderDragStart(event, this);">
									<div class="slider-module-track"></div>
									<div class="slider-module-track-background" id="video_bitrate-bg"></div>
									<span class="slider-module-mark" style="left: 0%;">64 Kbps</span>
									<span class="slider-module-mark" style="left: 25%;">512 Kbps</span>
									<span class="slider-module-mark" style="left: 50%;">4 Mbps</span>
									<span class="slider-module-mark" style="left: 75%;">32 Mbps</span>
									<span class="slider-module-mark" style="left: 100%;">256 Mbps</span>
									<div class="slider-module-slipper" id="video_bitrate-slipper" onmousedown="sliderDragStart(event, this);"></div>
								</div>
								<div class="slider-text" id="video_bitrate-text"></div>
							</div>
							
							<div class="slider">
								<div class="slider-title">编码质量</div>
								<div class="slider-module" id="video_preset-module" onmousedown="sliderDragStart(event, this);">
									<div class="slider-module-track"></div>
									<div class="slider-module-track-background" id="video_preset-bg" v-bind:style="'width: ' + video_preset_percent"></div>
									<span class="slider-module-mark" style="left: 100%;">placebo</span>
									<span class="slider-module-mark" style="left: 88.9%;">veryslow</span>
									<span class="slider-module-mark" style="left: 77.8%;">slower</span>
									<span class="slider-module-mark" style="left: 66.7%;">slow</span>
									<span class="slider-module-mark" style="left: 55.6%;">medium</span>
									<span class="slider-module-mark" style="left: 44.4%;">fast</span>
									<span class="slider-module-mark" style="left: 33.3%;">faster</span>
									<span class="slider-module-mark" style="left: 22.2%;">veryfast</span>
									<span class="slider-module-mark" style="left: 11.1%;">superfast</span>
									<span class="slider-module-mark" style="left: 0%;">ultrafast</span>
									<div class="slider-module-slipper" id="video_preset-slipper" onmousedown="sliderDragStart(event, this);" v-bind:style="'left: ' + video_preset_percent"></div>
								</div>
								<div class="slider-text" id="video_preset-text">{{ data.video_preset }}</div>
							</div>
							<div class="combobox">
								<div class="combobox-title">规格</div>
								<div class="combobox-selector" id="video_profile-div" onclick="popupMenu('video_profile')">
									<span class="combobox-selector-text" id="video_profile-text">{{ data.video_profile }}</span>
									<div class="combobox-selector-img"></div>
								</div>
							</div>
							<div class="combobox">
								<div class="combobox-title">级别</div>
								<div class="combobox-selector" id="video_level-div" onclick="popupMenu('video_level')">
									<span class="combobox-selector-text" id="video_level-text">{{ data.video_level }}</span>
									<div class="combobox-selector-img"></div>
								</div>
							</div>
							<div class="combobox">
								<div class="combobox-title">编码倾重</div>
								<div class="combobox-selector" id="video_tune-div" onclick="popupMenu('video_tune')">
									<span class="combobox-selector-text" id="video_tune-text">{{ data.video_tune }}</span>
									<div class="combobox-selector-img"></div>
								</div>
							</div>
							<div class="combobox">
								<div class="combobox-title">像素格式</div>
								<div class="combobox-selector" id="video_pixelfmt-div" onclick="popupMenu('video_pixelfmt')">
									<span class="combobox-selector-text" id="video_pixelfmt-text">{{ data.video_pixelfmt }}</span>
									<div class="combobox-selector-img"></div>
								</div>
							</div>
							-->
						</div>
						
						<!-- 音频 -->
						<div class="parabox-content parabox-content-unselected" id="parabox_3">
							<div class="checkbox">
								<div class="checkbox-title">启用音频</div>
								<div class="checkbox-track" id="audio_enable-div" onmousedown="switchDragStart(event, this);">
									<div class="checkbox-track-background" id="audio_enable-bg" v-bind:style="data.audio_enable == 0 ? 'width: 0%;' : 'width: 100%'"></div>
									<div class="checkbox-slipper" id="audio_enable-slipper" v-bind:style="data.audio_enable == 0 ? 'left: 0px;' : 'left: 64px'"></div>
								</div>
							</div>
							<div class="combobox">
								<div class="combobox-title">音频编码</div>
								<div class="combobox-selector" id="audio_acodec-div" onclick="popupMenu('audio_acodec')">
									<span class="combobox-selector-text" id="audio_acodec-text">{{ data.audio_acodec }}</span>
									<div class="combobox-selector-img"></div>
								</div>
							</div>
							<div class="slider">
								<div class="slider-title">码率</div>
								<div class="slider-module" id="audio_bitrate-module" onmousedown="sliderDragStart(event, this);">
									<div class="slider-module-track"></div>
									<div class="slider-module-track-background" id="audio_bitrate-bg" v-bind:style="'width: ' + audio_bitrate_percent"></div>
									<span class="slider-module-mark" style="left: 0%;">8 Kbps</span>
									<span class="slider-module-mark" style="left: 16.7%;">16 Kbps</span>
									<span class="slider-module-mark" style="left: 33.3%;">32 Kbps</span>
									<span class="slider-module-mark" style="left: 50%;">64 Kbps</span>
									<span class="slider-module-mark" style="left: 66.7%;">128 Kbps</span>
									<span class="slider-module-mark" style="left: 83.3%;">256 Kbps</span>
									<span class="slider-module-mark" style="left: 100%;">512 Kbps</span>
									<div class="slider-module-slipper" id="audio_bitrate-slipper" onmousedown="sliderDragStart(event, this);" v-bind:style="'left: ' + audio_bitrate_percent"></div>
								</div>
								<div class="slider-text" id="audio_bitrate-text">{{ data.audio_bitrate }}</div>
							</div>
							<div class="slider">
								<div class="slider-title">音量</div>
								<div class="slider-module" id="audio_vol-module" onmousedown="sliderDragStart(event, this);">
									<div class="slider-module-track"></div>
									<div class="slider-module-track-background" id="audio_vol-bg" v-bind:style="'width: ' + audio_vol_percent"></div>
									<span class="slider-module-mark" style="left: 0%;">-48 dB</span>
									<span class="slider-module-mark" style="left: 12.5%;">-36 dB</span>
									<span class="slider-module-mark" style="left: 25%;">-24 dB</span>
									<span class="slider-module-mark" style="left: 37.5%;">-12 dB</span>
									<span class="slider-module-mark" style="left: 50%;">0 dB</span>
									<span class="slider-module-mark" style="left: 62.5%;">+12 dB</span>
									<span class="slider-module-mark" style="left: 75%;">+24 dB</span>
									<span class="slider-module-mark" style="left: 87.5%;">+36 dB</span>
									<span class="slider-module-mark" style="left: 100%;">+48 dB</span>
									<div class="slider-module-slipper" id="audio_vol-slipper" onmousedown="sliderDragStart(event, this);" v-bind:style="'left: ' + audio_vol_percent"></div>
								</div>
								<div class="slider-text" id="audio_vol-text">{{ data.audio_vol }}</div>
							</div>
						</div>
						
						<!-- 视效 -->
						<div class="parabox-content parabox-content-unselected" id="parabox_4">
							<p style="text-align: center;">此功能暂未开发<br />请关注 https://FFBox.ttqf.tech/ 以获取版本更新</p>
						</div>
						
						<!-- 音效 -->
						<div class="parabox-content parabox-content-unselected" id="parabox_5">
							<p style="text-align: center;">此功能暂未开发<br />请关注 https://FFBox.ttqf.tech/ 以获取版本更新</p>
						</div>
						
						<!-- 时间 -->
						<div class="parabox-content parabox-content-unselected" id="parabox_6">
							<p style="text-align: center;">此功能暂未开发<br />请关注 https://FFBox.ttqf.tech/ 以获取版本更新</p>
							<!--
							<h1>Hello, electron!</h1>
							<button id="tinittest" onclick="initws()">初始化</button>
							<button id="test" onclick="sendMsg('lalala')">test</button>
							<button id="test" onclick="initFFmpeg();">initFFmpeg();</button>
							<button id="FFtest" onclick="FFtest();">FFtest</button>
							<button onclick="pushMsg('lalala')">pushMsg</button>
							-->
						</div>
					</div>
					
				</div>
			</div>
			
			<!-- 状态栏 -->
			<div id="statusbar">
				<div id="ffmpeg-version">当前 FFmpeg 版本：检测中</div>
				<div id="infoicon" onclick="infocenter_select();"><div src="image/info-transparent.svg"></div><span id="infocount">0</span></div>
				<div id="output-folder">输出文件夹：与输入相同</div>
			</div>
			
			<!-- 消息中心 -->
			<div id="infocenter" class="infocenter-show">
				<div id="infocenter-background" onclick="infocenter_unselect();"></div>
				<div id="infocenter-main">
					<div id="infocenter-title">消息中心</div>
					<div id="infocenter-crossline"></div>
					<div id="infocenter-box">
						<!-- 这里放消息 -->
					</div>
				</div>
			</div>
			
			<!-- 弹出菜单 -->
			<div id="popupmenu" class="invisible">
				<div id="popupmenu-background" onclick="popdownMenu();"></div>
				<div id="popupmenu-list">
					<div class="popupmenu-item">
						<div style="background-image: url(image/star.png);"></div>
						HEVC
					</div>
				</div>
				<div id="popupmenu-description" class="popupmenu-description-fold"></div>
			</div>

			<!-- 提示框
			<div id="messagebox">
				<div id="messagebox-background"></div>
				<div id="messagebox-box">
					<div id="messagebox-titlebar">
						<span id="messagebox-titletext">要退出咩？</span>
					</div>
					<div id="messagebox-content">
						<span id="messagebox-contenttext">您还有 0 个任务未完成，要退出🐎？</span>
						<div id="messageconfirm" class="msgbutton msgbutton-skyblue" onclick="readyToClose()">确认退出</div>
						<div id="messagecancel" class="msgbutton msgbutton-white" onclick="closeMsgbox()">不！</div>
					</div>
				</div>
			</div>
			-->

			<!-- 气泡 
			<div class="popup">
				<div class="popup-box">
					<div class="popup-message"></div>
				</div>	
			</div>
			-->
		</div>
		
		<script src="msgbox.js"></script>
		<script src="index.js"></script>
	</body>
</html>